<template>
    <div class="page-100 home-main-layout">
        <router-view></router-view>
        <div class="weui-tabbar buttom-tabbar">
            <a href="javascript:;" @click="homeHandler" class="weui-tabbar__item">
                <img v-if="!isHomeActive" slot="icon" class="logo-part" src="../../assets/ico-home.png" >
                <img v-else-if="isHomeActive" slot="icon" class="logo-part" src="../../assets/ico-home-enable.png">
                <p  v-bind:class="{'weui-tabbar__label':true,'blue-color':isHomeActive}">首页</p>
            </a>
            <a href="javascript:;" @click="waitHandler" class="weui-tabbar__item">
                <img v-if="!isWaitActive" slot="icon" class="logo-part" src="../../assets/icon-order.png" >
                <img v-else-if="isWaitActive" slot="icon" class="logo-part" src="../../assets/icon-order-enable.png">
                <p v-bind:class="{'weui-tabbar__label':true,'blue-color':isWaitActive}">待办</p>
            </a>
            <a href="javascript:;" @click="myHandler" class="weui-tabbar__item">
                <img v-if="!isMyActive" slot="icon" class="logo-part" src="../../assets/icon-wode.png" >
                <img v-else-if="isMyActive" slot="icon" class="logo-part" src="../../assets/icon-wode-enable.png">
                <p v-bind:class="{'weui-tabbar__label':true,'blue-color':isMyActive}">我的</p>
            </a>
        </div>
    </div>
</template>
<script>
    export default {
        name: "home",
        //http get/post demo
        data() {
            return {
                isHomeActive: true,
                isWaitActive: false,
                isMyActive: false,
            }
        },
        async created() {
            // let res = await getTest();
            // console.log(res);
            // console.log(res.data.code);
            // console.log(res.data.msg);
            // var mobile = "13634172741";
            // var pwd = "uu888888";
            // var response = await loginCustomer(mobile,pwd);
            // console.log(response);
            // console.log(response.data.code);
            // console.log(response.data.msg);


            if (this.$route.fullPath === '/home/home_detail') {
                this.isHomeActive = true;
                this.isWaitActive = false;
                this.isMyActive = false;
            } else if (this.$route.fullPath === '/home/wait') {
                this.isHomeActive = false;
                this.isWaitActive = true;
                this.isMyActive = false;
            } else if (this.$route.fullPath === '/home/center_info') {
                this.isHomeActive = false;
                this.isWaitActive = false;
                this.isMyActive = true;
            }
        },
        components: {
            // HelloWorld
        },
        methods: {
            homeHandler() {
                console.log('homeHandler');
                this.isHomeActive = true;
                this.isWaitActive = false;
                this.isMyActive = false;
                this.$router.replace({name: 'homeDetail'})
            },
            waitHandler() {
                console.log('waitHandler');
                this.isHomeActive = false;
                this.isWaitActive = true;
                this.isMyActive = false;
                this.$router.replace({name: 'wait'})
            },
            myHandler() {
                console.log('myHandler');
                this.isHomeActive = false;
                this.isWaitActive = false;
                this.isMyActive = true;
                this.$router.replace({name: 'centerInfo'})
            },
        }

    };
</script>

<style lang="scss">
    .home-main-layout {
        .iconfont {
            font-size: 0.35rem;
        }
        .buttom-tabbar {
            z-index:200;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;

            .logo-part {
                width: 0.5rem;
                height: 0.5rem;
            }
        }
    }
</style>
